// 轮播图
//动画函数
function animate(dom, prop, value, callback) {
    clearInterval(dom.timer);
    dom.timer = setInterval(function () {
        var target = parseInt(value);
        var current = parseInt(getComputedStyle(dom)[prop]);
        var speed = (target - current) / 2;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if (current == target) {
            clearInterval(dom.timer);
            if (typeof callback == "function") {
                callback();
            }
            return;
        }
        dom.style[prop] = current + speed + "px";
    }, 10)
}

//获取元素标签
var swiper = document.querySelector(".swiper_container");
var wrapper = document.querySelector(".swiper_wrapper");
var slide = document.querySelectorAll(".swiper_container .swiper_wrapper .swiper_slide");
var spans = document.querySelectorAll(".remomend_title .circle span");
var btnLeft = document.querySelector(".swiperBtn_lf");
var btnRight = document.querySelector(".swiperBtn_lr");

// 图片索引值
var index = 0;
// 导航点索引值
var count = 0;
//定时器
var timer = null;
//记录宽度 
var width = slide[0].offsetWidth;

//导航点切换
function light(elements) {
    for (var i = 0; i < spans.length; i++) {
        spans[i].className = "";
    }
    spans[elements].className = "active";
}

//图片索引值
function changeImg() {
    index++;
    if (index > 4) {
        index = 0;
    }
    animate(wrapper, "marginLeft", -(index * width));
    count++;
    count = count > 4 ? 0 : count;
    light(count);
}
//开启定时器
timer = setInterval(changeImg, 3000);

//点击圆点切换
for (var i = 0; i < spans.length; i++) {
    spans[i].counts = i;
    spans[i].onclick = function () {
        index = this.counts;
        count = this.counts;
        animate(wrapper, "marginLeft", -(index * width));
        light(count);
    }
}

//移入移除
swiper.onmouseenter = function () {
    clearInterval(timer);
}
swiper.onmouseleave = function () {
    clearInterval(timer);
    timer = setInterval(changeImg, 3000);
}

//点击左边
btnLeft.onclick = function () {
    index--;
    if (index < 0) {
        index = 4;
        wrapper.style["marginLeft"] = "5919px";
    }
    animate(wrapper, "marginLeft", -(index * width));
    count--;
    count = count < 0 ? 4 : count;
    light(count);
}
//点击右边
btnRight.onclick = function () {
    index++;
    if (index > 4) {
        index = 0;
        wrapper.style["marginLeft"] = "0px";
    }
    animate(wrapper, "marginLeft", -(index * width));
    count++;
    count = count > 4 ? 0 : count;
    light(count);
}

// 内容
var contribution = document.querySelectorAll(".contribution")
// console.log(contribution);
function foo1() {
    var html = '';
    data.forEach(function (item) {
        html += '<a href="' + item.a + '">';
        html += '<div class="roster">';
        html += '    <div class="roster_img">';
        html += '        <img src="./images/' + item.img + '.jpg"/>';
        html += '        <div class="pag">';
        html += '            <span>少年</span>';
        html += '            <span>玄幻</span>';
        html += '        </div>';
        html += '    </div>';
        html += '    <div class="roster_txt">';
        html += '        <div class="title">';
        if (item.num == 1 || item.num == 2 || item.num == 3) {
            html += '            <img src="./images/奖牌 (' + item.num + ').png"/>';
        } else {
            html += '<div class="rank">' + item.num + '</div>';
        }
        html += '            <span> ' + item.title + '   </span>';
        html += '        </div>';
        html += '        <div class="auto">  ' + item.auto + '</div>';
        html += '        <div class="des"> ' + item.des + ' </div>';
        html += '    </div>';
        html += '</div>';
        html += '</a>';
    })

    contribution[1].innerHTML = html;
}
foo1();

function foo2() {
    var htmlStr = '';
    fantasic.forEach(function (item) {
        htmlStr += '<a href="' + item.a + '">';
        htmlStr += '<div class="roster">';
        htmlStr += '    <div class="roster_img">';
        htmlStr += '        <img src="./images/' + item.img + '.webp"/>';
        htmlStr += '        <div class="pag">';
        htmlStr += '            <span>少年</span>';
        htmlStr += '            <span>玄幻</span>';
        htmlStr += '        </div>';
        htmlStr += '    </div>';
        htmlStr += '    <div class="roster_txt">';
        htmlStr += '        <div class="title">';
        if (item.num == 1 || item.num == 2 || item.num == 3) {
            htmlStr += '            <img src="./images/奖牌 (' + item.num + ').png"/>';
        } else {
            htmlStr += '<div class="rank">' + item.num + '</div>';
        }
        htmlStr += '            <span> ' + item.title + '   </span>';
        htmlStr += '        </div>';
        htmlStr += '        <div class="auto">  ' + item.auto + '</div>';
        htmlStr += '        <div class="des"> ' + item.des + ' </div>';
        htmlStr += '    </div>';
        htmlStr += '</div>';
        htmlStr += '</a>';
    })
    contribution[2].innerHTML = htmlStr;
}
foo2();

function foo3() {
    var str = '';
    old.forEach(function (item) {
        str += '<a href="' + item.a + '">';
        str += '<div class="roster">';
        str += '    <div class="roster_img">';
        str += '        <img src="./images/' + item.img + '.jpg"/>';
        str += '        <div class="pag">';
        str += '            <span>少年</span>';
        str += '            <span>玄幻</span>';
        str += '        </div>';
        str += '    </div>';
        str += '    <div class="roster_txt">';
        str += '        <div class="title">';
        if (item.num == 1 || item.num == 2 || item.num == 3) {
            str += '            <img src="./images/奖牌 (' + item.num + ').png"/>';
        } else {
            str += '<div class="rank">' + item.num + '</div>';
        }
        str += '            <span> ' + item.title + '   </span>';
        str += '        </div>';
        str += '        <div class="auto">  ' + item.auto + '</div>';
        str += '        <div class="des"> ' + item.des + ' </div>';
        str += '    </div>';
        str += '</div>';
        str += '</a>';
    })

    contribution[3].innerHTML = str;
}
foo3();

function foo4() {
    var strHtml = '';
    func.forEach(function (item) {
        strHtml += '<a href="' + item.a + '">';
        strHtml += '<div class="roster">';
        strHtml += '    <div class="roster_img">';
        strHtml += '        <img src="./images/' + item.img + '.webp"/>';
        strHtml += '        <div class="pag">';
        strHtml += '            <span>少年</span>';
        strHtml += '            <span>玄幻</span>';
        strHtml += '        </div>';
        strHtml += '    </div>';
        strHtml += '    <div class="roster_txt">';
        strHtml += '        <div class="title">';
        if (item.num == 1 || item.num == 2 || item.num == 3) {
            strHtml += '            <img src="./images/奖牌 (' + item.num + ').png"/>';
        } else {
            strHtml += '<div class="rank">' + item.num + '</div>';
        }
        strHtml += '            <span> ' + item.title + '   </span>';
        strHtml += '        </div>';
        strHtml += '        <div class="auto">  ' + item.auto + '</div>';
        strHtml += '        <div class="des"> ' + item.des + ' </div>';
        strHtml += '    </div>';
        strHtml += '</div>';
        strHtml += '</a>';
    })
    contribution[4].innerHTML = strHtml;

}
foo4();


// tab选项卡
$(".list .list_con li").click(function(){
        $(".list_con li").eq($(this).index()).addClass("touch").siblings().removeClass("touch");
        $(".popularity .contribution").eq($(this).index()).addClass(" current").siblings().removeClass(" current");
 })



     


